<template>
	<view class="wf-box">
		<view class="head" :style="{ paddingTop: navBarHeight }">
			<view class="head-np">
				<view class="back" @click="back()">
					<image src="../../static/img/chat-09.png"></image>
				</view>
				<view class="title">发红包</view>
				<view></view>
			</view>
		</view>
		
		<view class="main" :style="{ paddingTop: navBarHeight }">
			<view class="handoff" @click="open">{{ walletType == 1 ? '普通' : '拼手气' }}红包    <image src="../../static/img/chat-22.png"></image></view>
			<view class="p-row">
				<image src="../../static/img/chat-23.png"></image>
				<text class="row-t">红包个数</text>
				<input type="number" placeholder="填写红包个数">
				<text>个</text>
			</view>
			<view class="af-pmt">本群共6人</view>
			<view class="p-row mt">
				<image src="../../static/img/chat-24.png"></image>
				<text class="row-t">总金额</text>
				<input type="text" placeholder="￥0.00">
			</view>
			
			<view class="p-row mt">
				<!-- <image src="../../static/img/chat-24.png"></image> -->
				<text class="row-t">祝福语</text>
				<input type="text" placeholder="恭喜发财，大吉大利！">
			</view>
			
			<view class="congrats">
				<image src="../../static/img/chat-25.png"></image>
			</view>
			
			<view class="p-money">
				￥<text>{{ money }}</text>
			</view>
			<view class="p-insert">
				<view @click="tuck">塞钱进红包</view>
			</view>
			<view class="p-gray">未领取的红包，将于24小时后发起退款</view>
			
			<view class="p-logs">
				<view>红包记录</view>
			</view>
			
		</view>
		<!-- borderRadius  background-color="#fff"-->
		<uni-popup ref="popup" background-color="transparent" border-radius="8px 8px 0 0">
			<view class="enve-warp">
				<view @click="selectWallet(1)">普通钱包</view>
				<view @click="selectWallet(2)">拼手气钱包</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { sendRedPacketApi } from '@/api/api.js'
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		data() {
			return {
				chatIdx: '',
				money: '0.00',
				mainHeight: '',
				walletType: 1
			}
		},
		mixins: [navBarMixin],
		methods: {
			back() {
				uni.navigateBack()
			},
			open() {
				this.$refs.popup.open('bottom')
			},
			async tuck() {
				const res = await sendRedPacketApi({
					actionType: 1,
					money: 1,
					redPacketNum: 1,
					redType: 1,
					title: '发财',
					userId: 59
				})
				if(!res.code) {
					const data = JSON.stringify(res.data)
				
					uni.navigateTo({
						url: '/pages/chat/chat-box?packet=' + data + '&chatIdx=' + this.chatIdx
					})
				}
				
			},
			selectWallet(e) {
				this.walletType = e
				this.$refs.popup.close()
			}
		},
		onLoad(options) {
			this.chatIdx = options.chatIdx
		}
	}
</script>

<style lang="scss">
	.wf-box {
		overflow: hidden;
		
		.back {
			image {
				width: 20rpx;
				height: 37rpx;
			}
		}
		
		.head {
			position: fixed;
			z-index: 1;
			width: 100%;
			background: #fff;
		
			.head-np {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 96rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
		
				.title {
					font-size: 36rpx;
					font-weight: bold;
				}
			}
		
		}
		
		.main {
			margin-top: 96rpx;
			padding: 0 30rpx;
			// height: 100vh;
			overflow: hidden;
			.handoff {
				display: flex;
				align-items: center;
				margin: 30rpx 0;
				color: #C79649;
				font-weight: bold;
				image {
					margin-left: 12rpx;
					width: 20rpx;
					height: 10rpx;
				}
			}
			.p-row {
				padding: 16rpx 30rpx;
				display: flex;
				align-items: center;
				background: #fff;
				border-radius: 8rpx;
				image {
					width: 48rpx;
					height: 48rpx;
				}
				.row-t {
					margin-left: 16rpx;
					font-size: 28rpx;
					color: #333;
				}
				input {
					margin: 0 16rpx;
					margin-left: auto;
					font-size: 28rpx;
					text-align: right;
				}
				&.mt {
					margin-top: 30rpx;
					input {
						margin-right: 0;
					}
				}
				
			}
			
			.af-pmt {
				margin-top: 20rpx;
				color: #666;
				font-size: 24rpx;
			}
			
			.congrats {
				margin-top: 30rpx;
				image {
					width: 100%;
					height: 150rpx;
				}
			}
			.p-money {
				margin-top: 100rpx;
				text-align: center;
				font-size: 50rpx;
				font-weight: bold;
				text {
					font-size: 80rpx;
				};
			}
			.p-insert {
				padding: 0 120rpx;
				view {
					line-height: 80rpx;
					margin-top: 40rpx;
					background: #F95050;
					border-radius: 50rpx;
					text-align: center;
					font-size: 32rpx;
					color: #fff;
				}
				
			}
			.p-gray {
				margin-top: 30rpx;
				color: #999;
				font-size: 24rpx;
				text-align: center;
			}
			
			.p-logs {
				position: fixed;
				width: 100%;
				bottom: 80rpx;
				text-align: center;
				view {
					width: max-content;
					margin: 0 auto;
					color: $theme-color-a;
				}
				
			}
		}
	
		.enve-warp {
			// height: 400rpx;
			background-color: #fff;
			border-radius: 16rpx 16rpx 0 0;
			overflow: hidden;
			
			view{
				height: 120rpx;
				text-align: center;
				line-height: 120rpx;
				&:first-child {
					border-bottom: 2rpx solid #ccc;
				}
				
			}
		}
	}
</style>